import { useContext } from 'react'
import remarkGfm from 'remark-gfm'
import ReactMarkdown from 'react-markdown'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/prism'

import { MyContext } from '../../Store'

import './guidemd.scss'

export default function GuideMd() {

    const { data } = useContext(MyContext)

    return (
        <div className='guide_md'>
            <ReactMarkdown
                children={data}
                remarkPlugins={[remarkGfm]}
                components={{
                    code({ node, inline, className, children, ...props }) {
                        const match = /language-(\w+)/.exec(className || '')
                        return !inline && match ? (
                            <SyntaxHighlighter
                                children={String(children).replace(/\n$/, '')}
                                style={a11yDark}
                                language={match[1]}
                                PreTag="div"
                                customStyle={{ width: '800px' }}
                                {...props}
                            />
                        ) : (
                            <code className={className} {...props}>
                                {children}
                            </code>
                        )
                    }
                }}
            />
        </div>
    )
}
